import React, {Component} from 'react';
import axios from 'axios'

class Goods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            shop: [],
            title: [],
            shop1: [],
            title1: [],
            shop2: [],
            title2: [],
        }
    }

    render() {
        return (
            <div className='shop'>
                <div className="goods">
                    <p className="shopTitle">——{this.state.title.title}——</p>
                    <div className="goods_item">
                        {
                            this.state.shop.map((item, index) => {
                                return (
                                    index < 3 ?
                                        <dl key={index} onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                        </dl> :
                                        <dl key={index} className="goods_bot" onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                            <p className="shopPrice">¥{item.price}</p>
                                        </dl>
                                )
                            })
                        }

                    </div>
                </div>

                <div className="goods">
                    <p className="shopTitle2">——{this.state.title1.title}——</p>
                    <div className="goods_items">
                        {
                            this.state.shop1.map((item, index) => {
                                return (
                                    index < 2 ?
                                        <dl key={index} onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                        </dl> :
                                        <dl key={index} className="goods_bot" onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                            <p className="shopPrice">¥{item.price}</p>
                                        </dl>
                                )
                            })
                        }

                    </div>
                </div>
                <div className="goods">
                    <p className="shopTitle3">——{this.state.title2.title}——</p>
                    <div className="goods_item">
                        {
                            this.state.shop2.map((item, index) => {
                                return (
                                    index < 3 ?
                                        <dl key={index}  onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                        </dl> :
                                        <dl key={index} className="goods_bot"  onClick={this.commodityDetails.bind(this,item.gid)}>
                                            <dd><p>{item.title}</p></dd>
                                            <dt>
                                                <img src={item.image} alt=""/>
                                            </dt>
                                            <p className="shopPrice">¥{item.price}</p>
                                        </dl>
                                )
                            })
                        }

                    </div>
                </div>
            </div>
        );
    }

    componentDidMount() {
        axios.get('http://vueshop.glbuys.com/api/home/index/goodsLevel?token=1ec949a15fb709370f').then((res) => {
            const data = res.data.data[0].items
            console.log(data)
            this.setState({
                shop: data,
                title: res.data.data[0],
                shop1: res.data.data[1].items,
                title1: res.data.data[1],
                shop2: res.data.data[2].items,
                title2: res.data.data[2]
            })
        })
    }

    commodityDetails(gid){
        console.log(gid)
    }
}

export default Goods;